<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .nav {
        width: 500px;
        height: 400px;
        margin: auto;
        margin-top: 100px;
    }

    a {
        font-size: 24px;
        color: black;
        cursor: pointer;
    }

    a.active {
        color: rgb(255, 0, 255)
    }

    .news1 {
        width: 500px;
        height: 50px;
        background-color: chartreuse;
        margin-top: 20px;
        font-size: 20px;
    }

    .news2 {
        width: 500px;
        height: 50px;
        background-color: rgb(0, 183, 255);
        margin-top: 20px;
        font-size: 20px;
    }
</style>

<body>
    <div class="nav">
        <a href="/video">视频</a>
        <a href="/live">直播</a>
        <div class="countent"></div>
    </div>

</body>

</html>
<script>
    var as = document.querySelectorAll('a')
    as.forEach((item) => {
        item.onclick = function (e) {
            e.preventDefault()
            history.pushState({}, '', this.href)
            switch (location.pathname) {
                case '/video': render1(); break;
                case '/live': render2(); break;
            }
            // 高亮效果
            for (let i = 0; i < as.length; i++) {
                as[i].classList.remove("active")
            }
            this.classList.add("active")
        }
    })


    var arr1 = [
        { news: '70秒带你打卡互联网之光博览会' },
        { news: '殷墟考古取得新进展' },
        { news: '中央部署进一步优化防疫20条措施' },
        { news: '人民网：掌掴男童者打碎自己的前程' },
        { news: '本土感染激增 4省份连续3天超500例' },
        { news: '河南教育厅再回应高校学生突然离校' }
    ]

    function render1() {
        var contEle = document.querySelector('.countent')
        contEle.innerHTML = arr1.map((item, index) => {
            return `<div class="news1">${item.news}<div>`
        }).join('')
    }

    var arr2 = [
        { news: '韩国学生流行起梨泰院踩踏游戏' },
        { news: '南京掌掴男童男子家属：想和解' },
        { news: '俄为何突然从“关键战场”撤军？' },
        { news: '六旬男子伤害1名女性后坠桥身亡' },
        { news: '女子凌晨外卖被偷跪地大哭' },
        { news: '95后女生花1.96亿买下A股公司' }
    ]
    function render2() {
        var contEle = document.querySelector('.countent')
        contEle.innerHTML = arr2.map((item, index) => {
            return `<div class="news2">${item.news}<div>`
        }).join('')
    }

</script>